import React, { Component } from "react";

export default class Footer extends Component {
  constructor(){
    super()
    this.state = {
      tabs:['全部','已完成','未完成']
    }
  }
  render() {
    let {leftnum,tabIdx,handleDelCheck,handleTab} = this.props
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong> {leftnum} </strong>
          <span>item{leftnum>1?'s':''} left</span>
        </span>
        <ul className="filters">
          {
            this.state.tabs.map((item,index)=>{
              return <li key={item} onClick={()=>{handleTab(index)}}>
                <span className={tabIdx===index?'selected':''}>{item}</span>
              </li>
            })
          }
        </ul>

        <button onClick={handleDelCheck} className="clear-completed">clear all completed</button>
      </footer>
    );
  }
}
